<template>
  <div>
    <img src="../assets/logo.png">
    <el-row class="content">
      <el-col :xs="24" :sm="{span: 6,offset: 9}">
        <span class="title">
        欢迎登录
        </span>
        <el-row>
          <el-input
            v-model="account.userName"
            placeholder="账号"
            type="text">
          </el-input>
          <el-input
            v-model="account.password"
            placeholder="密码"
            type="password"
            @keyup.enter.native="loginToDo">
          </el-input>
          <el-button type="primary" @click="loginToDo">登录</el-button>
          <el-button type="text" class="signup" @click="signUp">注册</el-button>
        </el-row>
      </el-col>
    </el-row>
    <div v-own:hello="true">Hello</div>
  </div>
</template>

<script>
import UserDataMixin from './UserDataMixin';

export default {
  mixins: [UserDataMixin],
  directives: {
    own: {
      inserted(el, binding) {
        const { name, arg, value } = binding;
        console.log(value);
        if (Boolean(value)) {
          el.innerHTML = `${name}-- arg: ${arg}`;
        }
      },
    },
  },
  methods: {
    signUp() {
      this.$router.push({ name: 'Signup' });
    },
    loginToDo() {
      let data = JSON.parse(JSON.stringify(this.account));

      this.$http.post('/auth/user', data)
        .then((res) => {
          if(res.data.status == 0){ 
            sessionStorage.setItem('token',res.data.data); 
            this.$message({ 
              type: 'success',
              message: '登录成功！'
            });
            this.$router.push({ name: 'AddressBook' });
          }else{
            this.$message.error(res.data.msg);
            sessionStorage.setItem('token',null);
          }
        }, (err) => {
            this.$message.error('请求错误！');
            sessionStorage.setItem('token',null);
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .el-row.content
    padding 16px
  .title
    font-size 28px
  .el-input
    margin 12px 0
  .el-button
    width 100%
    margin-top 12px
  .signup
    width auto
    margin-right 10px
    float right
</style>
